<template>
	<view class="container">
		<BhTitle titleText="我的消息" @click-back="clickBack" :custom-click-back=1></BhTitle>

		<view v-for="(item, index) in unreadCommentList" :key="index" class="item-wrap" style="position: relative;">
			<view class="header bh-row bh-align-start">
				<!-- <image src="../../static/images/default_img.png" mode="scaleToFill" class="avatar" /> -->
				<image :src="item.userDto.avatarUrl" mode="scaleToFill" class="avatar" />
				<view class="nickname-wrap bh-col bh-justify-space-between bh-align-start">
					<view class="nickname">{{ item.userDto.nickName }}</view>

					<view class="nickname-desc">{{ getCommentDesc(item) }}</view>
					<!-- <view class="recordDto" @click="toDetail(item.recordDto)" v-if="!isSell(item.recordDto)">
						（{{ getPostTitle(item.recordDto) }})</view> -->
					<view class="content">
						<text class="who">{{ item.commentDto.content }}</text>
						<text v-if="item.parentCommentDto && item.parentCommentDto.content" class="content-txt">{{ item.parentCommentDto.content }}</text>
						<view @click="toDetail(item.recommendRecordDto)" v-if="item.recommendRecordDto && item.recommendRecordDto.id" class="recommend">
							{{ getRecommendDesc(item.recommendRecordDto) }}</view>
					</view>
				</view>
				<view class="recordDto" style="width: 96rpx;
    	height: 96rpx;
    	overflow: hidden;
    	margin-left: 14rpx;
    	text-align: left;
    	border-radius: 8rpx;
    	background-color: #eee;
    	padding: 8rpx;" @click="toDetail(item.recordDto)" v-if="!isSell(item.recordDto)">
					{{ getPostTitle(item.recordDto) }}</view>
				<!-- <image src="../../static/images/default_img.png" mode="scaleToFill" class="header-img" /> -->
				<image @click="toDetail(item.recordDto)" v-if="isSell(item.recordDto)" :src="getFirstFacadePicture(item.recordDto)" mode="scaleToFill" class="header-img" />

			</view>
			<view style="position: absolute;
    	top: 24rpx;
    	right: 32rpx;
    	color: #999999;
    	font-size: 24rpx;">{{ item.commentDto.createTimeDesc }}</view>

			<view class="line"></view>
			<view class="footer bh-row bh-justify-space-between">
				<view @click="toComment(index)" class="reply-wrap bh-row bh-justify-center bh-align-center">
					<image src="../../static/images/my/comment.png" mode="scaleToFill" class="reply-img" />
					<view class="reply-text">留言</view>
				</view>
				<view @click="toMakePhone(item)" class="mobile-wrap bh-row bh-justify-center bh-align-center">
					<image src="../../static/images/my/mobile.png" mode="scaleToFill" class="mobile-img" />
					<view class="mobile-text">打电话</view>
				</view>
			</view>
		</view>

		<view v-if="historyCommentList && historyCommentList.length > 0">
			<BhDivideLine title="以下是已读留言"></BhDivideLine>
		</view>

		<view v-for="(item, index) in historyCommentList" :key="index" class="item-wrap" style="position: relative;">
			<view class="header bh-row bh-align-start">
				<!-- <image src="../../static/images/default_img.png" mode="scaleToFill" class="avatar" /> -->
				<image :src="item.userDto.avatarUrl" mode="scaleToFill" class="avatar" />
				<view class="nickname-wrap bh-col bh-justify-space-between bh-align-start">
					<view class="nickname">{{ item.userDto.nickName }}</view>

					<view class="nickname-desc">{{ getCommentDesc(item) }}</view>
					<!-- <view class="recordDto" @click="toDetail(item.recordDto)" v-if="!isSell(item.recordDto)">
						（{{ getPostTitle(item.recordDto) }})</view> -->
					<view class="content">
						<text class="who">{{ item.commentDto.content }}</text>
						<text v-if="item.parentCommentDto && item.parentCommentDto.content" class="content-txt">{{ item.parentCommentDto.content }}</text>
						<view @click="toDetail(item.recommendRecordDto)" v-if="item.recommendRecordDto && item.recommendRecordDto.id" class="recommend">
							{{ getRecommendDesc(item.recommendRecordDto) }}</view>
					</view>
				</view>
				<view class="recordDto" style="width: 96rpx;
    	height: 96rpx;
    	overflow: hidden;
    	margin-left: 14rpx;
    	text-align: left;
    	border-radius: 8rpx;
    	background-color: #eee;
    	padding: 8rpx;" @click="toDetail(item.recordDto)" v-if="!isSell(item.recordDto)">
					{{ getPostTitle(item.recordDto) }}</view>
				<!-- <image src="../../static/images/default_img.png" mode="scaleToFill" class="header-img" /> -->
				<image @click="toDetail(item.recordDto)" v-if="isSell(item.recordDto)" :src="getFirstFacadePicture(item.recordDto)" mode="scaleToFill" class="header-img" />

			</view>
			<view style="position: absolute;
    	top: 24rpx;
    	right: 32rpx;
    	color: #999999;
    	font-size: 24rpx;">{{ item.commentDto.createTimeDesc }}</view>

			<view class="line"></view>
			<view class="footer bh-row bh-justify-space-between">
				<view @click="toComment(index)" class="reply-wrap bh-row bh-justify-center bh-align-center">
					<image src="../../static/images/my/comment.png" mode="scaleToFill" class="reply-img" />
					<view class="reply-text">留言</view>
				</view>
				<view @click="toMakePhone(item)" class="mobile-wrap bh-row bh-justify-center bh-align-center">
					<image src="../../static/images/my/mobile.png" mode="scaleToFill" class="mobile-img" />
					<view class="mobile-text">打电话</view>
				</view>
			</view>
		</view>

		<!-- <view v-for="(item, index) in allMessageList" :key="index" class="item-wrap" style="position: relative;">
			<view class="header bh-row bh-align-start">
				<image :src="item.userDto.avatarUrl" mode="scaleToFill" class="avatar" />
				<view class="nickname-wrap bh-col bh-justify-space-between bh-align-start">
					<view class="nickname">{{ item.userDto.nickName }}</view>

					<view class="nickname-desc">{{ getCommentDesc(item) }}</view>
					<view class="content">
						<text class="who">{{ item.commentDto.content }}</text>
						<text v-if="item.parentCommentDto && item.parentCommentDto.content" class="content-txt">{{ item.parentCommentDto.content }}</text>
						<view v-if="item.recommendRecordDto && item.recommendRecordDto.id" class="recommend">
							{{ getRecommendDesc(item.recommendRecordDto) }}</view>
					</view>
				</view>
				<view class="recordDto" style="width: 96rpx;
    	height: 96rpx;
    	overflow: hidden;
    	margin-left: 14rpx;
    	text-align: left;
    	border-radius: 8rpx;
    	background-color: #eee;
    	padding: 8rpx;" @click="toDetail(item.recordDto)" v-if="!isSell(item.recordDto)">
					{{ getPostTitle(item.recordDto) }}</view>
				<image @click="toDetail(item.recordDto)" v-if="isSell(item.recordDto)" :src="getFirstFacadePicture(item.recordDto)" mode="scaleToFill" class="header-img" />

			</view>
			<view style="position: absolute;
    	top: 24rpx;
    	right: 32rpx;
    	color: #999999;
    	font-size: 24rpx;">{{ item.commentDto.createTimeDesc }}</view>

			<view class="line"></view>
			<view class="footer bh-row bh-justify-space-between">
				<view @click="toComment(index)" class="reply-wrap bh-row bh-justify-center bh-align-center">
					<image src="../../static/images/my/comment.png" mode="scaleToFill" class="reply-img" />
					<view class="reply-text">留言</view>
				</view>
				<view @click="toMakePhone(item)" class="mobile-wrap bh-row bh-justify-center bh-align-center">
					<image src="../../static/images/my/mobile.png" mode="scaleToFill" class="mobile-img" />
					<view class="mobile-text">打电话</view>
				</view>
			</view>
		</view> -->
		<BhLoadMore :status="tabLoadingStatus" @click-load-more="()=>{}" ></BhLoadMore>
		<view v-if="(!allMessageList || allMessageList.length <= 0) && tabLoadingStatus != 'loading'" style="height: 60%;display: flex;align-items: center;justify-content: center;">
			<bh-no-more title="暂无留言～"></bh-no-more>
		</view>
		<show-add-comment-sheet v-if="showAddComment" ref="textarea1" :show="showAddComment" @close="() => { this.showAddComment = false }" :init-value="commentContent" @confirm="addComment" @change="changeComment"></show-add-comment-sheet>

	</view>
</template>

<script>
import {
	Api
} from '../../api/api';
import {
	Dict
} from '../../components/custom_views/dict';
import showAddCommentSheet from '@/PostPage/custom_views/show-add-comment-sheet.vue';
import check_utils from '../../components/custom_views/check_utils';
import BhTitle from '../../components/custom_views/bh-title.vue'
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import {
	PostUtils
} from '@/components/post_item/post_add_sell_dto';
import {
	bhTabMixin,
	commonMixin
} from '../../components/custom_views/mixin';
import BhDivideLine from '../../components/custom_views/bh-divide-line.vue';
import BhLoadMore from '../../components/custom_views/bh-load-more.vue';
export default {
	components: {
		showAddCommentSheet,
		bhNoMore,
		BhTitle,
		BhDivideLine,
		BhLoadMore
	},
	mixins: [commonMixin, bhTabMixin],
	data() {
		return {
			...bhTabMixin.initData(0),
			tabList: [
				{
					param: {
						pageNum: 1,
						pageSize: 10,
					},
					list: []
				}
			],
			// unreadCommentList: [],
			// allMessageList: [],
			showAddComment: false,
			commentContent: '',
			commentOperIndex: 0,
			source: '',
		}
	},
	computed: {
		allMessageList() {
			return this.tabList[0].list
		},
		unreadCommentList() {
			return this.allMessageList.filter(message => message.unreadFlg == 1)
		},
		historyCommentList() {
			return this.allMessageList.filter(message => message.unreadFlg == 0)
		}
	},
	methods: {
		clickBack() {
			console.log('我的消息页面，点击返回按钮')
			if (this.source == 'notify') {
				uni.redirectTo({
					url: '/pages/home/home?fromMyMessage=1'
				})
			} else {
				uni.navigateBack()
			}
		},
		requestData(params) {
			let that = this
			return Api.CommentApi.allMessageList(params, that, (res) => { }, false)
		},
		toDetail(recordDto) {
			if (!PostUtils.canCommentOrContact(recordDto)) {
				return
			}
			if (recordDto.postType == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
				uni.navigateTo({
					url: '/PostPage/post_detail_sell/post_detail_sell?fromMessagePage=true&postId=' + recordDto.id
				})
			} else {
				uni.navigateTo({
					url: '/PostPage/post_detail_buy/post_detail_buy?fromMessagePage=true&postId=' + recordDto.id
				})
			}
		},
		toMakePhone(item) {
			let otherTelephone = this.getOtherTelephone(item)
			if (!otherTelephone) {
				check_utils.showCustToast('请等对方联系你哦～')
			} else {
				if (!PostUtils.canCommentOrContact(item.recordDto)) {
					return
				}
				uni.makePhoneCall({
					// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
					phoneNumber: otherTelephone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			}

		},
		changeComment(commentContent) {
			console.log('留言内容', commentContent)
			this.commentContent = commentContent
		},
		getTargetUserId(item) {
			if (item.userDto.userId != this.$store.state.sessionDto.userDto.userId) {
				return item.userDto.userId
			} else {
				return item.targetUserDto.userId
			}
		},
		getOtherTelephone(item) {
			if (item.recordDto.userId == this.$store.state.sessionDto.userDto.userId) {
				// 当前用户的发帖，无法拨打电话
				return ''
			} else {
				return item.recordDto.contactPhone
			}
		},
		addComment() {
			let that = this
			console.log('留言的内容', this.commentContent)
			if (!this.commentContent || this.commentContent.length < 5) {
				uni.showToast({
					title: '留言内容至少需要5个汉字哦～',
					icon: "none"
				})
				return
			}
			this.showAddComment = false
			Api.CustRequestSubscribeMessage(
				() => {

					let currentComment = that.allMessageList[that.commentOperIndex]

					Api.CommentApi.addNew(
						that,
						currentComment.recordDto.id,
						currentComment.userDto.userId,
						that.commentContent,
						currentComment.commentDto.id,
						currentComment.recommendRecordDto && currentComment.recommendRecordDto.id ?
							currentComment.recommendRecordDto.id : 0,
						(res) => {
							if (res.code == 200) {
								if (res.code == 200) {
									check_utils.showCustToast('回复成功')
									that.commentContent = ''
								}
							} else {
								check_utils.showCustToast(res.msg)
							}
						},
						true
					)
				},
				() => {
					Api.CommentApi.addNew(
						that,
						currentComment.recordDto.id,
						currentComment.userDto.userId,
						that.commentContent,
						currentComment.parentCommentDto && currentComment.parentCommentDto.id ? currentComment
							.parentCommentDto.id : 0,
						currentComment.recommendRecordDto && currentComment.recommendRecordDto.id ?
							currentComment.recommendRecordDto.id : 0,
						(res) => {
							if (res.code == 200) {
								if (res.code == 200) {
									check_utils.showCustToast('回复成功')
									that.commentContent = ''
								}
							} else {
								check_utils.showCustToast(res.msg)
							}
						},
						true
					)
				}
			)
		},
		toComment(index) {
			console.log('显示留言窗口时', index)
			if (!PostUtils.canCommentOrContact(this.tabList[0].list[index].recordDto)) {
				return
			}
			this.showAddComment = true
			this.commentContent = ''
			this.commentOperIndex = index
			this.$nextTick(() => {
				this.$refs.textarea1.focusInput();
			});
		},
		getShowUserDto(firstCommentDto) {
			if (firstCommentDto.userDto.userId != this.$store.state.sessionDto.userDto.userId) {
				return firstCommentDto.userDto
			} else {
				return firstCommentDto.targetUserDto
			}
		},
		getFirstFacadePicture(recordDto) {
			if (recordDto.facadePicture) {
				let ary = recordDto.facadePicture.split(',')
				if (ary.length > 0) {
					return ary[0]
				}
			}
			return ''
		},
		isSell(recordDto) {
			return Dict.PostMainTypeEnum.Shop.childs.ShopSell.value == recordDto.postType
		},
		isMe(commentDto) {
			return commentDto.userId == this.$store.state.sessionDto.userDto.userId
		},
		whoSay(commentDto) {
			if (commentDto.userDto.userId != this.$store.state.sessionDto.userDto.userId) {
				return commentDto.userDto.nickName + '： '
			} else {
				return '我： '
			}
		},
		getCommentDesc(item) {
			if (item.recommendRecordDto != null && item.recommendRecordDto.id) {
				if (item.recommendRecordDto.userId == this.$store.state.sessionDto.userDto.userId) {
					return '通过TA的求租向TA推荐店铺'
				} else {
					return '通过你的求租向你推荐店铺'
				}

			} else if (item.recordDto.postType == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
				if (item.recordDto.userId == this.$store.state.sessionDto.userDto.userId) {
					return '通过你的店铺向你留言'
				} else {
					return '通过TA的店铺向TA留言'
				}
			} else if (item.recordDto.postType == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
				if (item.recordDto.userId == this.$store.state.sessionDto.userDto.userId) {
					return '通过TA的求租向TA留言'
				} else {
					return '通过你的求租向你留言'
				}
			}
		},
		getRecommendDesc(item) {
			return PostUtils.getTitle(item)
		},
		getPostTitle(item) {
			return PostUtils.getTitleWithArea(item)
		},
		initData() {
			let that = this
			let params = {
				pageNum: 1,
				pageSize: 10,
			}
			Api.CommentApi.allMessageList(params, that, (res) => {
				if (res.code == 200) {
					console.log('响应结果', res.data.records.length)
					that.allMessageList = res.data.records

					Api.CommentApi.unreadRemove(that, (res) => {
						if (res.code == 200) { }
					}, false)
				}
			})

		}
	},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad(options) {
		console.log('我的消息页面执行onLoad', options)
		let that = this
		let fromNotify = options.source
		that.source = fromNotify
		// 先登录
		if (fromNotify == 'notify') {
			// 从通知跳转过来
			Api.LoginApi.login(that, (res) => {
				uni.setStorageSync('firstLogin', 0)
				that.getTabData(0, true, (res) => {
					if (res.code == 200) {
						Api.CommentApi.unreadRemove(that, (res) => {
							if (res.code == 200) { }
						}, false)
					}
				})
				// that.initData()
			})
		} else {
			that.getTabData(0, true, (res) => {
				if (res.code == 200) {
					Api.CommentApi.unreadRemove(that, (res) => {
						if (res.code == 200) { }
					}, false)
				}
			})
			// that.initData()
		}


	},
	onReachBottom() {
		this.scrolltolower()
	},
	onPullDownRefresh() {
		let that = this
		that.getTabData(0, true, (res) => {
			uni.stopPullDownRefresh()
		})
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);


.container {
	background-color: #F5F9FA;
	width: 100%;
	min-height: 100vh;
	padding-bottom: 60rpx;
}

.line {
	width: 582rpx;
	height: 1px;
	border-top: 1rpx solid #e8e8e8;
	margin: 10rpx auto;
}

.item-wrap {
	margin: 0 32rpx 32rpx 32rpx;
	padding: 64rpx 32rpx 0 32rpx;
	border-radius: 8rpx;
	background: #FFFFFF;

	.header {
		// margin-top: 64rpx;

		.avatar {
			width: 104rpx;
			height: 104rpx;
			border: 2rpx solid #F8D247;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.recordDto {
			font-size: 22rpx;
			color: #999;
		}

		.nickname-wrap {
			width: 370rpx;

			.nickname {
				font-size: 32rpx;
				font-weight: 600;
				color: #000;
				margin-bottom: 10rpx;
			}

			.nickname-desc {
				font-size: 24rpx;
				font-weight: normal;
				color: #9E9E9E;
			}
		}

		.header-img {
			display: block;
			width: 104rpx;
			height: 104rpx;
			border-radius: 8rpx;
			margin-left: 15rpx;
		}
	}

	.content {
		border-radius: 8rpx;
		width: 370rpx;
		box-sizing: border-box;
		background: #F5F6F6;
		padding: 10rpx 15rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;

		.who {
			font-weight: 600;
			color: #000;
			font-size: 28rpx;
			display: block;
		}

		.content-txt {
			font-size: 28rpx;
			font-weight: 500;
			// color: rgba(0, 0, 0, 0.85);
			margin-top: 20rpx;
			color: #999;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.content-txt::before {
			width: 8rpx;
			height: 20rpx;
			display: inline-block;
			content: '';
			background-color: #cccccc;
			margin-right: 10rpx;
		}

		.recommend {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);
			border: 1px solid #cccccc;
			border-radius: 8rpx;
			padding: 10rpx;
			margin: 10rpx 0;
		}
	}

	.footer {
		// height: 64rpx;
		// padding-bottom: 10rpx;
		justify-content: flex-end;
		padding-top: 10rpx;
    padding-bottom: 20rpx;

		.reply-wrap {
			// border-right: 1rpx solid #e8e8e8;
			// flex: 1;
			// height: 40rpx;

			// flex: 1;
			display: flex;
    /* float: right; */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    // padding-top: 22rpx;
    // padding-bottom: 18rpx;
		height: 70rpx;
    background-color: #F8D247;
    border-radius: 16rpx;
    width: 180rpx;
		margin-right: 32rpx;

			.reply-img {
				display: block;
				width: 24rpx;
				height: 24rpx;
			}

			.reply-text {
				// font-size: 24rpx;
				font-weight: 500;
				margin-left: 12rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.85);

				// color: #666666;
			}
		}

		.mobile-wrap {
			// flex: 1;

			// flex: 1;
			display: flex;
    /* float: right; */
    flex-direction: row;
    justify-content: center;
    align-items: center;
		// padding-top: 18rpx;
    // padding-bottom: 14rpx;
		height: 70rpx;
    background-color: #F87147;
    border-radius: 16rpx;
    width: 180rpx;

			.mobile-img {
				display: block;
				width: 24rpx;
				height: 22rpx;
			}

			.mobile-text {
				// font-size: 24rpx;
				
				font-weight: 500;
				margin-left: 12rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.85);

				// color: #666666;
			}
		}
	}
}
</style>